<template> 
  <yd-layout  class="bgstyle">
    <yd-slider autoplay="3000">
        <yd-slider-item>
            <a>
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </yd-slider-item>
    </yd-slider>
        <yd-tab>
           <yd-tab-panel label="登录">
                    <yd-flexbox direction="vertical" class="inputstyle">
                        <yd-cell-group class="demo-small-pitch">
                            <yd-flexbox-item>
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-dianhua" slot="left" class="iconstyle"/>
                                  <yd-input slot="right" type="tel" required regex="mobile" ref="login#loginname" hdLabel="手机号" v-model="loginname" style="width:236px;" placeholder="请输入手机号"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                        </yd-cell-group>
                        <yd-cell-group class="demo-small-pitch">
                            <yd-flexbox-item>
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-mm" slot="left" class="iconstyle"/>
                                  <yd-input slot="right" type="password" style="width:236px;" hdLabel="密码" required ref="login#password" v-model="password" placeholder="请输入密码" :showSuccessIcon="false"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                        </yd-cell-group>
                        <yd-flexbox-item>
                            <yd-button-group>
                                <yd-button size="large" type="primary" class="loginstyle" @click.native="clickLogin" >登录</yd-button>
                            </yd-button-group>
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                            <router-link to="/Retrievepassword" class="passwordbutton">忘记密码?</router-link>
                        </yd-flexbox-item>
                        <yd-flexbox-item v-show="false">
                          <yd-flexbox class="thirdParty">
                              <yd-flexbox-item class="div2"></yd-flexbox-item>
                              <yd-flexbox-item>
                                  <span>第三方登录</span>
                              </yd-flexbox-item>
                              <yd-flexbox-item class="div2"></yd-flexbox-item>
                          </yd-flexbox>
                          <yd-flexbox class="thirdicon">
                              <yd-flexbox-item>
                                <yd-icon name="weixin" color="#44b549"></yd-icon>
                              </yd-flexbox-item>
                          </yd-flexbox>
                        </yd-flexbox-item>
                    </yd-flexbox>
                </yd-tab-panel>
                <yd-tab-panel label="注册">
                    <yd-flexbox direction="vertical" class="inputstyle">
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-dianhua" slot="left" class="iconstyle"/>
                                  <yd-input slot="right" type="tel" v-model="regmobile" ref="regmobile" required regex="mobile" placeholder="请输入手机号码" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                                <!-- <p slot="bottom" style="color:#F00;padding: 0 .3rem;" v-html="result"></p> -->
                            </yd-cell-group>
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-flexbox>
                                    <yd-flexbox-item>
                                        <yd-cell-item>
                                            <yd-input slot="right" max="4" v-model="code" type="text" placeholder="验证码" required :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                        </yd-cell-item>
                                    </yd-flexbox-item>
                                    <yd-flexbox-item>
                                      <img @click="clickValidateCode" :src="codeimg" class="codeimg"> 
                                    </yd-flexbox-item>
                                </yd-flexbox>
                            </yd-cell-group>
                        </yd-flexbox-item>
                        
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-flexbox>
                                    <yd-flexbox-item>
                                        <yd-cell-item>
                                            <yd-input slot="right" v-model="mobilecode" max="6" required type="text" placeholder="请输入手机验证码" :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                        </yd-cell-item>
                                    </yd-flexbox-item>
                                    <yd-flexbox-item>
                                        <yd-button type="primary" @click.native="clickSendMessageForMobile" class="getcode">获取短信验证码</yd-button>
                                    </yd-flexbox-item>
                                </yd-flexbox>
                            </yd-cell-group>
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                            <yd-cell-group class="demo-small-pitch">
                                <yd-cell-item>
                                  <hd-svg-icon name="hd-mm" slot="left" class="iconstyle"></hd-svg-icon>
                                  <yd-input slot="right" type="password" required v-model="setpassword" placeholder="请设置密码" :showRequiredIcon="false" :showSuccessIcon="false" ></yd-input>
                                </yd-cell-item> 
                            </yd-cell-group>  
                        </yd-flexbox-item>
                        <yd-flexbox-item>
                          <yd-button-group>
                                <yd-button size="large" type="primary" style="height:40px;" @click.native="clickRegist">注册</yd-button>
                          </yd-button-group>  
                        </yd-flexbox-item>
                    </yd-flexbox>
                </yd-tab-panel>
        </yd-tab>
  </yd-layout>
</template>

<script>
import sha1 from 'sha1'
import GUID from 'hdc/guid'

export default {
  name: 'Register',
  data () {
    return {
      loginname: '',
      password: '',
      codeimg: '',
      regmobile: '',
      setpassword: '',
      code: '',
      result: '',
      mobilecode: '',
      guid2: ''
    }
  },
  mounted: function () {
    this.clickValidateCode()
  },
  methods: {
    clickLogin () {
      // 表单校验
      if (!this.hdCheckForm('login')) return false
      let pwd = sha1(this.password)
      this.hdAjax({
        url: this.API.login,
        // method: 'post',
        data: {
          password: pwd,
          username: this.loginname
        },
        success: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            // 提示信息
            this.$dialog.toast({mes: '登录成功'})
            //  存储用户信息
            let LoginInfo = {}
            LoginInfo.username = this.loginname
            LoginInfo.password = pwd
            this.store.set(this.STORECONST.LOGININFO, LoginInfo)
            let UserInfo = {}
            UserInfo.accessTicket = resultData.data.accessTicket
            UserInfo.userId = resultData.data.userId
            // 有效期(秒)
            UserInfo.period = resultData.data.period
            let exper = ''
            if (UserInfo.period) {
              exper = new Date().getTime() + (UserInfo.period * 1000)
            }
            if (exper) {
              this.store.set(this.STORECONST.USERINFO, UserInfo, exper)
            } else {
            // 没有有效期 默认半小时
              this.store.set(this.STORECONST.USERINFO, UserInfo, new Date().getTime() + 300000)
            }
            // 登录成功后跳转
            this.$router.push(this.$route.query.redirect || '/')
          } else {
            this.$dialog.toast({mes: resultData.errmsg})
          }
        }
      })
    },
    clickValidateCode () {
      var guidobject = new GUID();
      var guid = guidobject.newGUID();
      this.guid2 = guid;
      if (!guid) {
        guidobject = new GUID();
        guid = guidobject.newGUID();
      }
        // 获取验证码
      this.hdAjax({
        url: this.API.validateCode,
        data: {
          key: guid
        },
        success: (resultData) => {
          this.codeimg = resultData.data[guid]
        }
      });
      return guid;
    },
    clickSendMessageForMobile () {
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
    //   const input = this.$refs.input9;
    //   this.result = `{<br />  valid：${input.valid}，<br />  errorMes：'${input.errorMsg}'，<br />  errorCode：'${input.errorCode}'<br />}`;
      if (!this.code) {
        this.$dialog.toast({mes: '请输入验证码!'})
        return false;
      }
      this.hdAjax({
        url: this.API.sendMessageForMobile,
        data: {
          mobile: this.regmobile,
          clientType: 'app',
          key: this.guid2,
          vCode: this.code
        },
        success: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            this.$dialog.toast({mes: '验证码已发送'})
          } else {
            this.$dialog.toast({mes: resultData.errmsg})
          }
        }
      })
    },
    clickRegist () {
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
      if (!this.mobilecode) {
        this.$dialog.toast({mes: '请输入短信验证码!'})
        return false
      }
      this.hdAjax({
        url: this.API.validate,
        data: {
          key: this.guid2,
          mobile: this.regmobile,
          code: this.mobilecode
        },
        success: (resultData) => {
          if (resultData.errcode === 0) {
            if (!this.setpassword) {
              this.$dialog.toast({mes: '请设置密码!'})
              return false
            }
            if (!this.regmobile) {
              this.$dialog.toast({mes: '请输入手机号!'})
              return false
            }
            let setpwd = sha1(this.setpassword)
            this.hdAjax({
              url: this.API.regist,
              data: {
                key: this.guid2,
                province: 'LA',
                city: 'LA',
                mobile: this.regmobile,
                password: setpwd
              },
              success: (resultData) => {
                if (resultData.data && resultData.errcode === 0) {
                  this.$dialog.toast({mes: '注册成功!'})
                } else {
                  this.$dialog.toast({mes: resultData.errmsg})
                }
              }
            })
          } else {
            this.$dialog.toast({mes: resultData.errmsg})
          }
        }
      })
    }
  }
}
</script>
<style scoped>  
    .inputstyle{
      width: 300px;
      margin:0 auto;
      padding:20px;
     }
     .thirdParty{
       width: 100%;
       text-align: center;
       padding-top:1rem;
     }
     .thirdicon{
       line-height: 1.25rem;
       text-align: center;
     }
    .div2{ 
        border-top:#d0d0d0 1px solid;
        transform-origin: 0 0;
        transform:scaleY(.5);
    }
    .passwordbutton{
        border:none;
        color: #8E8E8E;
        float: right;
        padding-top: .2rem;
    }
    .bgstyle{
      background-color:#ffffff;
    }
    .loginstyle{
        width:236px;
        height:40px;

    }
    .codeimg{
        width:120px;
        height:40px;
        float: right;
    }
    .getcode{
      height: .9rem;
      width: 90%;
      padding: 0;
      float: right;
    }
    .iconstyle{
      font-size: .5rem !important;
      margin-right: .1rem;
      fill: #6b6b6b !important;
    }
    .cell-icon{
      margin-right: 0;
    }
    .cell-right{
      padding-right:0;
    }
    .cell-item{
      padding-left:0;
    }
</style>
